<template>
  <div class="app">
    <div class="section">
       <uni-list>
       <uni-list-item title="模板名称" :custom="true" :show-arrow="false">
          <div class="inputTip_box">
             <!-- :maxlength="2" -->
             <!-- @input="limitTxt" -->
            <input type="text" placeholder="请输入模板名称最多8个字" v-model="template.name" :maxlength="8">
            <!-- <span class="inputTip">{{inputTips.name}}</span> -->
          </div>
        </uni-list-item>
       </uni-list>

    </div>

    <div class="section">
       <uni-list>
         <uni-list-item title="阶段标签" :custom="true" :show-arrow="false">
           <div class="opiton_bar">
             <template v-if="!del && !sort">
                   <span
              class="option_txt add"
              @click="showPop">添加</span>
              <template v-if="!$util.isEmpty(template.hkds_site_stage)">
                      <span
              class="option_txt del"
              @click="del = true">删除</span>
              <span
              class="option_txt"
              @click="sort = true">排序</span>
              </template>
             </template>
              <span
            v-if="del"
            class="option_txt"
            @click="del = false">完成</span>
            <span
            v-if="sort"
            class="option_txt"
            @click="sort = false">完成</span>
           </div>
         </uni-list-item>
         <template  v-if="!$util.isEmpty(template.hkds_site_stage)">
              <uni-list-item v-for="(item,index) in template.hkds_site_stage" :title="item.name" :custom="true" :show-arrow="false" :key="index" @click="editStage(item.id)">
                <div class="right_option">

                  <div class="text_arrow">
                    <span>{{del || sort ? '':item.fast_num+'话术'}}</span>
                     <view
            class="iconfont iconjiantou"
            v-if="!del && !sort"/>
                  </div>

                     <view
            class="iconfont iconshanchu"
            @click="delItem(item.id,index)"
            v-if="del"/>

                  <div class="move_box" v-if="sort">
                       <div
                @click="moveUp(index)"
                class="sort_circle left_circle"
                :class="{off: index === 0}">
                <view class="iconfont iconshang"/>
              </div>
              <div
                @click="moveDown(index)"
                class="sort_circle right_circle"
                :class="{off: index === template.hkds_site_stage.length - 1}">
                <view class="iconfont iconxia"/>
              </div>
                  </div>

                </div>
              </uni-list-item>
         </template>

       </uni-list>

    </div>

    <p class="template_tip">温馨提示：阶段标签最少3个，最多12个</p>
    <div class="confirm_btn" v-show="!sort && !del" @click="submit">
      完成
    </div>

       <uni-popup ref="popup" custom :isRadius="true" maxHeight="100vh">
      <view class="stage_name">
        <view class="top_wrap">
          <view class="title_wrap"><text class="content">设置阶段名称</text><text class="tip">(2字以内)</text></view>
          <input type="text" placeholder="请输入阶段名称" v-model="stageName" :maxlength="2" :placeholder-style="phStyle">
        </view>
        <view class="bottom_option">

          <view class="btn cancel" @click="closePop">取消</view>
          <view class="btn confirm" @click="addStage">确定</view>
        </view>
      </view>
    </uni-popup>

  </div>
</template>

<script>

import uniList from '@/components/uni-list/uni-list'
import uniListItem from '@/components/uni-list-item/uni-list-item'
import uniPopup from '@/components/uni-popup/uni-popup'
import { getStageList, addStageTemplate, editStageTemplate } from '@/api/constructionSite'

export default {
	name: 'editStageTemplate',
	components: {
		uniList,
		uniListItem,
		uniPopup
	},
	data() {
		return {
			form: {
				name: ''
			},
			stage: '',
			del: false,
			sort: false,
			phStyle: `font-size: 15px;color: rgba(204,204,204,1)`,
			option: {},
			stageName: '',
			template: {
				name: '',
				hkds_site_stage: []
			},
			delArr: [],
			hasSort: false
		}
	},
	onLoad(option) {
		this.option = option
		// edit_group_id
		uni.setNavigationBarTitle({
			title: option.edit_group_id ? '编辑阶段模板' : '新建阶段模板'
		})
	},
	onShow() {
		if (this.option.edit_group_id) {
			this.getStageList()
		}
	},
	methods: {
		getStageList() {
			getStageList({ group_id: this.option.edit_group_id }).then(res => {
				this.template = res.data.list || {}
				this.form.name = res.data.list.name
			})
		},
		postRequest() {
			const save_data = this.template.hkds_site_stage.map((item, index) => ({
				name: item.name,
				order: index,
				id: item.id
			}))
			// console.log(save_data, 'save_data111111')
			const params = {
				save_data,
				group_name: this.template.name
			}
			if (this.option.edit_group_id) {
				params.group_id = this.option.edit_group_id
				if (this.delArr.length) {
					params.del_data_id = this.delArr
				}
				return editStageTemplate(params)
			} else {
				return addStageTemplate(params)
			}

			// if(this.option.edit_group_id) {
			//   return editStageTemplate
			// }
		},
		// limitTxt(e) {
		// 	console.log(e, '输入事件')
		// 	const value = e.detail.value
		// 	if (value.length > 2) {
		// 		this.template.name = value.slice(0, 2)
		// 	}
		// },
		submit() {
			if (!this.template.name) {
				uni.showToast({
					title: '请输入模板名称',
					icon: 'none'
				})
				return
			}

			const length = this.template.hkds_site_stage.length
			if (length < 3 || length > 12) {
				uni.showToast({
					title: '阶段标签最少3个，最多12个',
					icon: 'none'
				})
				return
			}
			this.postRequest().then(() => {
				uni.showToast({
					title: this.option.edit_group_id ? '修改成功' : '添加成功',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 500)
			})
		},
		addStage() {
			if (!this.stageName) {
				return
			}
			this.template.hkds_site_stage.push({ name: this.stageName, order: 0, id: 0, fast_num: 0 })
			this.closePop()
		},
		editStage(id) {
			if (this.sort || this.del) {
				return
			}
			const hasAdd = this.template.hkds_site_stage.findIndex(item => item.id == 0)
			if (hasAdd != -1 || this.delArr.length || this.hasSort) {
				uni.showModal({
					title: '保存提示',
					content: '保存该阶段模板后才能编辑阶段更新话术，确定要保存吗？',
					confirmText: '确定保存',
					confirmColor: '#ffd11a',
					success: res => {
						if (res.confirm) {
							this.submit()
						}
					}
				})
			} else {
        	uni.navigateTo({
					url: `/pages/constructionSite/editTemplateSpeech?ts_id=${id}`
				})
			}
		},
		showPop() {
			this.stageName = ''
			this.$refs.popup.open()
		},
		closePop() {
			this.$refs.popup.close()
		},
		swapArray(index1, index2) {
			// let list = this.commonJS.deepCopy(this.template.hkds_site_stage)
			// const delItem = list.splice(index2, 1, list[index1])[0]
			// list[index1] = delItem
			// this.$set(list, index1, delItem)
			// this.template.hkds_site_stage = [...list]
			if (!this.hasSort) {
				this.hasSort = true
			}
			this.template.hkds_site_stage[index1] = this.template.hkds_site_stage.splice(index2, 1, this.template.hkds_site_stage[index1])[0]
		},
		moveUp(index) {
			if (index !== 0) {
				this.swapArray(index, index - 1)
			}
		},
		moveDown(index) {
			if (index !== this.template.hkds_site_stage.length - 1) {
				this.swapArray(index, index + 1)
			}
		},
		delItem(id, index) {
			if (id) {
				this.delArr.push(id)
			}
			this.template.hkds_site_stage.splice(index, 1)
		}
	}
}
</script>

  <style scoped lang="scss">
  .app{
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 100px;
  }
  .stage_name {
    background-color: #fff;
    border-radius: 20px;
    .top_wrap {
      padding: 59px 30px 30px;
      .title_wrap {
        line-height: 1;
        justify-content: center;
        display: flex;
        align-items: center;
        .content,.tip {
          font-size:36px;
        }
        .content{
          color:#333;
        }
        .tip{
          color: #999;
        }

      }
        input {
          text-align: left;
          padding-left: 21px;
          display: flex;
          margin-top: 30px;
          height:90px;
          background:rgba(245,245,245,1);
          border-radius:10px;
        }
    }
    .bottom_option {
      margin-top: 30px;
      border-top:1px solid rgba(210,211,213,1);
      display: flex;
      .btn {
        flex: 1 1 50%;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size:36px;
      }
      .confirm {
        color: #FF6900;
        border-left: 1px solid rgba(210,211,213,1);
      }
      .cancel {
        color:#666;
      }
    }
  }
  .move_box {
    display: flex;
    justify-content: flex-end;
    .left_circle {
      margin-right: 10px;
    }
  }
  .right_option {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    .text_arrow {
      display: flex;
      align-items: center;
      span,.iconjiantou {
        color: #999;
      }
      span {
        padding-right: 9px;
      }
    }
  }
    .section {
    // margin-top: 20px;
    border-top: 20px solid #f5f5f5;
    box-sizing: border-box;
    .stageLabel {
    font-size:28px;
    font-weight:600;
    color:rgba(51,51,51,1);
    }
    .opiton_bar {
      display: flex;
      justify-content: flex-end;
      height: 100%;
      align-items: center;
      width: 100%;
      .add {
        margin-right: 52px;
      }
      .del {
        margin-right: 50px;
      }
    }
    .option_txt {
    font-size:28px;
    color:rgba(255,105,0,1);
    }
    .label {
    font-size:28px;
    color:rgba(102,102,102,1);
    }
    .iconjiantou {
    font-size: 28px;
    color: #999
    }
    }
    .template_tip {
    font-size:24px;
    color:rgba(153,153,153,1);
    padding: 38px 31px 0;
    line-height: 1;
    }
    .confirm_btn {
    height:100px;
    line-height: 100px;
    text-align: center;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background:rgba(255,209,26,1);
    box-shadow:0px -3px 10px 0px rgba(0, 0, 0, 0.1);
    font-size:32px;
    color:rgba(58,27,4,1);
    z-index: 999;
    }
     .title {
         font-size: 36px;
         color: #333;
         span {
             color: #999
         }
     }
     .iconshanchu {
       color: #FF353A;
       font-size: 34px;
     }
     .sort_circle {
       display: flex;
       justify-content: center;
       align-items: center;
      width:44px;
      height:44px;
      background:rgba(255,255,255,1);
      border:1px solid rgba(238,238,238,1);
      border-radius: 50%;
      .iconshang,.iconxia {
        color: #666
      }
      &.off {
        .iconshang,.iconxia {
          color: #ccc
        }
      }
     }
  </style>
